<route lang="jsonc" type="page">
{
  "layout": "default",
  "style": {
    "navigationStyle": "custom"
  }
}
</route>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { logout } from '@/api/login'
import { getUser } from '@/api/user'
import Navigation from '@/components/Navigation/Navigation.vue'
import { useUserStore } from '@/store/user'

enum MenuItem {
  AVATAR = '头像',
  USERNAME = '用户名',
  PHONE = '手机号码',
  PASSWORD = '修改密码',
  WECHAT = '微信',
  ABOUT = '关于我们',
  LOGOUT = '退出登录',
}

const userStore = useUserStore()
const userInfo = reactive({
  avatar: '',
  username: '',
  phone: '',
  wechat: '',
})
onLoad(() => {
  getUser().then((res) => {
    userInfo.avatar = res.data.avatar
    userInfo.username = res.data.account
    userInfo.phone = res.data.mobile
    userInfo.wechat = ''
  })
})
// 菜单列表
const menuList = [
  { name: MenuItem.AVATAR, icon: '/static/user/avatar.png' },
  { name: MenuItem.USERNAME, icon: '/static/user/username.png' },
  { name: MenuItem.PHONE, icon: '/static/user/phone.png' },
  { name: MenuItem.PASSWORD, icon: '/static/user/password.png' },
  { name: MenuItem.WECHAT, icon: '/static/user/wechat.png' },
  { name: MenuItem.ABOUT, icon: '/static/user/about.png' },
  { name: MenuItem.LOGOUT, icon: '/static/user/logout.png' },
]

// 菜单点击事件
async function handleMenuClick(item: { name: MenuItem }) {
  switch (item.name) {
    case MenuItem.AVATAR:
      // 头像点击事件
      console.log('点击头像')
      break
    case MenuItem.USERNAME:
      // 用户名点击事件
      console.log('点击用户名')
      break
    case MenuItem.PHONE:
      // 手机号点击事件
      console.log('点击手机号')
      break
    case MenuItem.PASSWORD:
      // 修改密码点击事件
      console.log('点击修改密码')
      break
    case MenuItem.WECHAT:
      // 微信绑定点击事件
      console.log('点击微信绑定')
      break
    case MenuItem.ABOUT:
      // 关于我们点击事件
      console.log('点击关于我们')
      uni.navigateTo({
        url: '/pages/ShortcutTools/About Us/About Us',
      })
      break
    case MenuItem.LOGOUT:
      // 使用微信原生弹窗
      uni.showModal({
        title: '确认退出',
        content: '确定要退出登录吗？',
        success: async (res) => {
          if (res.confirm) {
            // 用户点击确认，执行退出登录
            try {
              const logoutRes = await logout()
              localStorage.removeItem('token')
              console.log(logoutRes)
              // 退出成功提示
              uni.showToast({
                title: '退出成功',
                icon: 'success',
              })
              // 跳转到登录页面
              setTimeout(() => {
                uni.redirectTo({
                  url: '/pages/login/login',
                })
              }, 1500)
            }
            catch (err) {
              console.error('退出失败', err)
              uni.showToast({
                title: '退出失败',
                icon: 'error',
              })
            }
          }
        },
      })
      break
  }
}
</script>

<template>
  <view class="settings-container">
    <!-- 顶部导航 -->
    <Navigation name="设置" />

    <!-- 设置内容 -->
    <view class="settings-content">
      <!-- 头像区域 -->
      <view class="avatar-item" @click="handleMenuClick({ name: '头像' })">
        <view class="item-left">
          <text class="item-name">头像</text>
        </view>
        <view class="item-right flex items-center">
          <image :src="userInfo.avatar || '/static/images/default-avatar.png'" class="avatar" mode="aspectFill" />
          <view class="arrow" />
        </view>
      </view>

      <!-- 其他设置项 -->
      <view v-for="item in menuList.slice(1, -1)" :key="item.name" class="setting-item" @click="handleMenuClick(item)">
        <view class="item-left">
          <text class="item-name">{{ item.name }}</text>
        </view>
        <view class="item-right flex items-center">
          <text
            v-if="item.name === '用户名'"
            class="item-value"
          >
            {{ userInfo.username || '未设置' }}
          </text>
          <text
            v-else-if="item.name === '手机号码'"
            class="item-value"
          >
            {{ userInfo.phone ? userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '未绑定' }}
          </text>
          <text
            v-else-if="item.name === '微信'"
            class="item-value"
          >
            {{ userInfo.wechat ? '已绑定' : '去绑定' }}
          </text>
          <view class="arrow" />
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-item" @click="handleMenuClick(menuList[menuList.length - 1])">
        <text class="logout-text">{{ menuList[menuList.length - 1].name }}</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.settings-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.settings-content {
  padding: 30rpx;
  background-color: #ffffff;
}

.avatar-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.item-left {
  display: flex;
  align-items: center;
}

.item-name {
  font-size: 32rpx;
  color: #333333;
}

.item-right {
  display: flex;
  align-items: center;
}

.item-value {
  font-size: 30rpx;
  color: #999999;
  margin-right: 10rpx;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.arrow {
  width: 20rpx;
  height: 20rpx;
  border-top: 2rpx solid #999999;
  border-right: 2rpx solid #999999;
  transform: rotate(45deg);
}

.logout-item {
  margin-top: 60rpx;
  padding: 30rpx 0;
  text-align: center;
}

.logout-text {
  font-size: 32rpx;
  color: #ff4d4f;
}
</style>
